I'm try to select the last element that is not empty of a class.
For example, here I would like to select the second element:
<span class="test">A</span>
<span class="test">B</span>
<span class="test"></span>
<span class="test"></span>
But because the innerText changes (with the actions of the user), I can't just use
document.querySelector(".test:nth-of-type(2)");
I've tried this but it doesn't work :
document.querySelector('.test:not(:empty):nth-last-of-type(1)');
function myFunction(){
document.querySelector('.test:not(:empty):nth-last-of-type(1)').innerText = "test";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="test">A</span><br>
<span class="test">B</span><br>
<span class="test"></span><br>
<span class="test"></span><br>
<input type="button" value="change 2nd element" onclick="myFunction()"/>Why use querySelector for this? I would suggest this:
document
.querySelectorAll('.test') // all with test class
.filter(elem => elem.innerText !== '') // only not empty
.at(-1) // last element
// or, if you need backward browser compatibility:
document
.querySelectorAll('.test') // all with test class
.filter(elem => elem.innerText !== '') // only not empty
.reverse()[0]